import { colors } from "@/data/shared/colors";
import { View } from "@tarojs/components";

import { Icon, Paragraph } from "@/components";
import style from "./index.module.scss";
import Taro from "@tarojs/taro";

interface AddressProps {
  upperLine: string;
  lowerLine?: string;
  lat?: number;
  lon?: number;
  dest?: string;
}

const C09Address = ({ upperLine, lowerLine, lat, lon, dest }: AddressProps) => {
  const hasNavigateData = lat && lon && dest;
  return (
    <View
      className={style["address-wrapper"]}
      onClick={() => {
        if (hasNavigateData) {
          Taro.openLocation({
            latitude: lat,
            longitude: lon,
            scale: 18,
            name: dest,
            address: upperLine + lowerLine,
          });
        }
      }}
    >
      <Icon className={style["location-icon"]} type="Location" />
      <View>
        <Paragraph color={colors.colorDark} size="small" noSpacing>
          {upperLine}
        </Paragraph>
        {lowerLine && (
          <Paragraph size="small" noSpacing>
            {lowerLine}
          </Paragraph>
        )}
      </View>
    </View>
  );
};

export default C09Address;
